<template>
<div>
  <!--<mu-drawer :staticClass="mu-app-drawer" :open='open' :docked='docked' :zDepth= docked ? 0 : 2>-->
    <!--<div class='mu-app-drawer-content'>-->
      <!--<mu-divider />-->
      <!--<mu-list dense  textline="two-line" toggle-nested>-->
        <!--&lt;!&ndash;<main-menu-item :item="item" v-for="item in menuList" :key="item.menuId"></main-menu-item>&ndash;&gt;-->
      <!--</mu-list>-->
    <!--</div>-->
  <!--</mu-drawer>-->
  <mu-drawer staticClass='mu-app-drawer' :docked='docked' :open='open' :zDepth= 2>
  <mu-appbar  class='mu-app-drawer-header'>
    <router-link tag='div' class='mu-appbar-title-text' to='/'>Muse-Admin</router-link>
  </mu-appbar>
  <div class='mu-app-drawer-content'>
    <mu-divider />
    <mu-list textline="two-line" toggle-nested v-for="ditem in menuList" :key="ditem.menuId">
      <mu-list-item v-if="item.type === 1" to="item.path" value="item.path" slot="default" button >
          <main-menu-item :item="ditem" ></main-menu-item>
      </mu-list-item>

    </mu-list>
  </div>
  </mu-drawer>
</div>
</template>

<script>
  import MainMenuItem from './MainMenuItem'
  import {auth_menu} from '@/api/api'
  import menuList from '../frame/home/user'
  export default {
    components: {MainMenuItem},
    data: () => ({
      menuList: menuList
    }),
    props: {
      open: Boolean,
      docked: Boolean,
//      menuList: {},
      home: Boolean
    },
    created() {
//      this.getMenuList()
    },

    methods: {
      getMenuList() {
        auth_menu().then(response => {
           console.log(JSON.stringify(response.menuList))
          this.menuList = response.menuList;
        }, (message) => {
          window.alert(message)
        })
      }
    }
  }
</script>
